import { defineStore } from 'pinia'
import { SidebarType, GroupListType, AppListType } from '@/store/interface/global'

export const useGlobalStore = defineStore('global', {
    state: () => ({
        sidebar: <SidebarType>{
            width: 42,
            sideBarOpacity: 0.6,
            iconSize: 60,
            iconRadius: 16,
            iconGap:30,
            appGridWidth:1350,
            appOpacity:1,
            appFontSize:12,
            appFontColor:'#fff',
            timeSize:47,
            fixed: 'left',
            groupList: [{ id: '1', name: '主页', icon: 'icon-zhuye', appList: [{ id: '1', name: '百度', url: 'http://www.baidu.com', iconImg: '', iconText: '百度', bgColor: "#1890ff", type: 'app', size: '1x1' }] },
            { id: '2', name: '设计', icon: 'icon-tubiao_shejikongjian', appList: [{ id: '2', name: '163', url: 'http://www.163.com', iconImg: '', iconText: '163', bgColor: "#1890ff", type: 'app', size: '1x1' }] }],
            isHide: false,
            activeFlag: '1',
            currentTab: 0
        },
        iconComputedSize:60,
        iconComputedRadius:16,
        iconComputedGap:30,
        showAppName:true,
        setDrawerVisible: false,
        contextmenuType: '',
        batchEditFlag: false,
        mobile:false,
        dark:false,
        primaryColor:'var(--primary-color)',
        componentList: {} as Record<string, Component>
    }),
    actions: {
        setGlobal(...arg:any){
            this.$patch({[arg[0]]:arg[1]})
        },
        setShowAppName(val:boolean){
            this.showAppName = val
        },
        setAppFontSize(val:number){
            this.sidebar.appFontSize = val
        },
        setAppFontColor(val: string) {
            this.sidebar.appFontColor = val
        },
        setSidebarWidth(val: number) {
            this.sidebar.width = val
        },
        setTimeSize(val:number) {
            this.sidebar.timeSize = val
        },
        setSidebarOpacity(val: number) {
            this.sidebar.sideBarOpacity = val
        },
        setSidebarFixed(val: 'left' | 'right') {
            this.sidebar.fixed = val
        },
        setSidebarHide(val: boolean) {
            this.sidebar.isHide = val
        },
        addSidebarGroup(val: GroupListType) {
            val.appList = []
            this.sidebar.groupList.push(val)
        },
        addGroupAppList(val: AppListType) {
            this.sidebar.groupList.forEach(item => {
                if (item.id == this.sidebar.activeFlag) {
                    item.appList?.push(val)
                    return
                }
            })
        },
        updateGroupApp(val: AppListType) {
            this.sidebar.groupList.forEach(item => {
                if (item.id == this.sidebar.activeFlag) {
                    item.appList?.forEach((app, index) => {
                        if (app.id == val.id) {
                            item.appList?.splice(index, 1, val)
                            return
                        }
                    })
                }
            })
        },
        removeGroupApp(val: AppListType) {
            this.sidebar.groupList.forEach(item => {
                if (item.id == this.sidebar.activeFlag) {
                    item.appList?.forEach((app, index) => {
                        if (app.id == val.id) {
                            item.appList?.splice(index, 1)
                            return
                        }
                    })
                }
            })
        },
        removeSidebarGroup(id: string) {
            this.sidebar.groupList = this.sidebar.groupList.filter(item => item.id !== id)
        },
        editSidebarGroup(val: GroupListType) {
            this.sidebar.groupList.forEach((item, index) => {
                if (item.id == val.id) {
                    this.sidebar.groupList.splice(index, 1, val)
                    return
                }
            })
        },
        updateSetDrawerVisible(val: boolean) {
            this.setDrawerVisible = val
        },
        setAppOpacity(val:number){
            this.sidebar.appOpacity = val
        },
        setIconGap(val: number) {
            this.sidebar.iconGap = val
        },
        setIconComputedGap(val: number) {
            this.iconComputedGap = val
        },
        setIconSize(val: number) {
            this.sidebar.iconSize = val
        },
        setIconComputedSize(val:number){
            this.iconComputedSize = val
        },
        setIconRadius(val: number) {
            this.sidebar.iconRadius = val
        },
        setIconComputedRadius(val: number) {
            this.iconComputedRadius = val
        },
        setAppGridWidth(val:number){
            this.sidebar.appGridWidth = val
        },
        setContextmenuType(val: 'main' | 'icons' | "sidebar") {
            this.contextmenuType = val
        },
        setBatchEditFlag(val: boolean) {
            this.batchEditFlag = val
        },
        setMobile(val:boolean){
            this.mobile = val
        }
    }
})